<template>
  <van-row>
    <!-- 头部内容 -->
    <van-row>
      <van-col span="24">
        <!-- 吸附在顶部 -->
        <van-sticky>
          <van-notice-bar left-icon="volume-o" text="任务管理" scrollable />
        </van-sticky>
      </van-col>
    </van-row>
    <!-- 中间的内容 -->
    <van-row class="div_body_content">
      <van-col span="24">
        <transition enter-active-class="animate__animated animate__fadeIn">
          <!-- 路由跳转的内容存放地址 -->
          <router-view />
        </transition>
      </van-col>
    </van-row>
    <!-- 底部内容 -->
    <van-row v-if="isShowFoot">
      <van-col span="24">
        <van-tabbar v-model="active" @change="tabbarOnChange">
          <van-tabbar-item :name="item.name" v-for="(item,index) in tabbarListData" :key="index">
            <span>{{item.title}}</span>
            <template #icon="props">
              <img :src="props.active ? item.active : item.inactive" />
            </template>
          </van-tabbar-item>
        </van-tabbar>
      </van-col>
    </van-row>
  </van-row>
</template>

<script>
  import {
    Row,
    Tabbar,
    TabbarItem,
    Sticky,
    Col,
    NoticeBar,
    Dialog,
    Toast
  } from 'vant';

  export default {
    name: 'app',
    components: {
      'van-col': Col,
      "van-row": Row,
      "van-tabbar": Tabbar,
      "van-tabbar-item": TabbarItem,
      "van-sticky": Sticky,
      "van-notice-bar": NoticeBar
    },
    data() {
      return {
        //底部导航栏的数据
        tabbarListData: [{
            name: "task",
            title: "任务",
            active: './static/imgs/task.active.png',
            inactive: './static/imgs/task.png'
          },
          {
            name: "tasklist",
            title: "列表",
            active: './static/imgs/tasklist.active.png',
            inactive: './static/imgs/tasklist.png'
          },
          {
            name: "msg",
            title: "消息",
            active: './static/imgs/msg.active.png',
            inactive: './static/imgs/msg.png'
          },
          {
            name: "user",
            title: "用户",
            active: './static/imgs/user.active.png',
            inactive: './static/imgs/user.png'
          }
        ],
        organizationInvite: {
          id: 0, //邀请记录id
          inviteUserName: '', //邀请人
        }
      }
    },
    computed: {
      //底部的激活状态
      active: {
        get() {
          return this.$store.state.tabberActive
        },
        set(val) {
          this.$store.commit('updatetTabberActive', val)
        }
      },
      //是否显示底部的导航栏
      isShowFoot() {
        return this.$store.state.isShowFoot
      }
    },
    async mounted() {
      var self = this;
      //订阅切换页面的事件
      this.$eventBus.subscribe('connectionSocket', async function (val) {
        //已经登录成功 此时可以获取用户的一些基本的信息 并且根据userId连接websocket
        await this.$taskSocket.connection(self.$config.wsUrl, self.$user.getUserId());
      });
      //订阅组织邀请
      this.$eventBus.subscribe('organizationInvite', (res) => {
        this.organizationInvite.id = res.id;
        this.organizationInvite.inviteUserName = res.inviteUserName;
        Dialog.confirm({
          title: '组织邀请',
          message: `${res.inviteUserName}正在邀请你加入组织,是否同意申请?`,
          beforeClose: this.beforeClose,
        });
      })

    },
    //方法
    methods: {
      //监听导航栏 改变事件
      tabbarOnChange(index) {
        try {
          //跳转到指定名称的路由
          this.$router.push({
            name: index
          });
        } catch (error) {}
      },
      //组织邀请的按钮事件
      beforeClose(action, done) {
        if (action === 'confirm') {
          this.$ajax.put(`/api/user/AcceptInvite/${this.organizationInvite.id}`)
            .then(res => {
              Toast.success('加入成功');
              done();
            })
            .catch(e => {
              Toast.success('操作失败');
              console.warn(e);
            });
        } else {
          done();
        }
      }
    }
  }

</script>

<style scoped>
  /* 禁用y轴的滚动条 */
  .div_body {
    overflow-y: hidden;
  }

  .div_body_content {
    /* margin-top: 5px; */
    overflow-y: auto;
    /* margin-bottom: 100px; */
  }

</style>
